<template>
  <div>
    <el-card shadow="hover" body-style="width:100%;" style="width: 50%">
    <!-- 店主修改店铺基本信息 shopDetail -->
    <el-form :rules="rules" ref="form" :model="shopInfo" label-width="80px" >
      <el-form-item label="店铺名字" prop="shopName">
        <el-input v-model="shopInfo.shopName"  />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model.number="shopInfo.phone" />
      </el-form-item>
      <el-form-item label="店铺简介" prop="summary">
        <el-input v-model="shopInfo.summary" />
      </el-form-item>
      <el-form-item label="暂停营业" prop="closed">
        <el-switch v-model="shopInfo.closed" />
      </el-form-item>
      <el-form-item label="店铺图片" prop="shopSrc">
        <el-upload
          class="avatar-uploader"
          action="/dev-api/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="shopInfo.shopSrc" :src="shopInfo.shopSrc" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button @click="cancelSubmit">取消修改</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ShopDetail',
  data() {
    return {
      shopInfo: {
        id: '',
        shopName: '',
        shopSrc: '',
        phone: '',
        summary: '',
        closed: false
      },
      rules: {
        phone: [
          { required: true, message: '请输入店主联系方式', trigger: 'blur' },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的联系方式'
          }
        ],
        shopName: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        summary: [
          { required: true, message: '请填写店铺简介', trigger: 'change' }
        ],
        shopSrc: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getShopInfo()
  },
  methods: {
    async getShopInfo() {
      const res = await this.$API.shop.reqShopInfo()
      if (res.code === 200) {
        // 解构赋值,去除不要的属性,保留...shopinfo
        const { weight, isShutDown, stars, ownerName, userId, ...shopInfo } =
          res.data
        this.shopInfo = shopInfo
        // console.log("@@@shopInof解构赋值", this.shopInfo);
      }
    },
    async onSubmit() {
      // console.log('@@@@submit',{...this.shopInfo})
      const res = await this.$API.shop.reqUpdateShopInfo(this.shopInfo)
      if (res.code === 200) {
        this.$message.success('修改店铺信息成功')
      }
    },
    cancelSubmit() {
      this.getShopInfo()
    },
    // 上传图片前后函数
    handleAvatarSuccess(res, file) {
      this.shopInfo.shopSrc = res.data
      this.showSrc = res.data
      console.log('@@@@handleAvatarSuccess-res', res)
      console.log('@@@@handleAvatarSuccess-file', file)
    },
    beforeAvatarUpload(file) {
      // console.log("@@@输出上传之前的file", file);
      // const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      // return isJPG && isLt2M;
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
